<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>木鱼</title>
    <link rel="stylesheet" href="../common/style/reset.css" />
    <style>
      .view{
        position: relative;
        width: 100%;
        height: 100%;
        padding: 20vw;
        background-color: rgba(255, 255, 255, 0.02);
      }

      .merit{
        position: absolute;
        top: 20vw;
        right: 20vw;
        color: #fff;
        font-size: 7vw;
        animation: An 0.3s linear 0s forwards;
      }

      @keyframes An {
        0%{
          top: 20vw;
          opacity: 1;
        }
        100%{
          opacity: 0;
          top: 0vw;
        }
      }

      .wooden-fish{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.1s linear !important;
        filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));
      }

      .wooden-fish:active{
        transform: scale(1.1);
      }

      .count{
        position: absolute;
        bottom: 10vw;
        left: 10vw;
        font-size: 13vw;
        color: rgba(255, 255, 255, 0.4);
      }

    </style>
  </head>
  <body>
    <div class="view">
      <svg t="1716961768367" class="wooden-fish" viewBox="0 0 1365 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2885"><path fill="#666" d="M1.450653 780.39695c-10.175905 64.255398 36.031662 101.161718 59.626108 112.361614 23.594445 11.178562 63.274073 0 78.825927 0 116.542907 11.178562 366.759228 131.220103 678.606972 131.220103 0 0 504.635269 7.445264 543.31224-360.487287 9.19458-95.529771 4.885288-277.458732-71.039334-286.162651-63.956734-8.426588-102.121709 4.074628-183.315615 20.565141-53.908828 10.922564-189.011561 29.973052-212.926004 44.970245-260.989553 118.718887-403.324219 204.371417-442.299853 217.128631-29.439724 0-54.975485-7.359931-62.100752-69.972677 0-25.706426 98.089747-87.039184 140.137353-96.959091C682.660267 452.869354 796.365867 435.333519 809.720409 435.333519c19.263819 0 441.489194-101.588381 454.438406-111.188291 12.949212-9.59991 26.62375-18.986489 26.623751-52.543508 0-15.359856-33.813016-49.663534-72.319322-91.455142-45.674238-49.556869-99.94573-107.092329-140.606682-120.788201C1002.934597 20.958737 856.077308-10.912964 727.779844 3.572233 446.929143 35.273269 271.677453 342.662388 256.424263 363.995521c-64.852725 90.708483-116.542907 205.587406-143.678653 256.296264C86.548522 669.272659 11.71189 735.149375 1.450653 780.39695z" p-id="2886" data-spm-anchor-id="a313x.search_index.0.i2.608b3a81t2dBYA"></path></svg>
      <div class="count">0</div>
    </div>
  </body>
  <script type="module" src="../common/js/setting.js"></script>
  <script type="module" src="../common/js/menu.js"></script>
  <script type="module" src="../common/js/move.js"></script>
  <script type="module" src="../common/js/counter.js"></script>
  <script type="module">
    const viewEl = document.querySelector('.view');
    const woodenFishEl = document.querySelector('.wooden-fish');
    const countEl = document.querySelector('.count');

    let data = {
      count: 0,
    };

    let countFlag = false;

    if(window.ipcRenderer){

      window.ipcRenderer.on('init', (event, res)=>{
        data.count = res.count ? res.count : 0;
        countEl.innerText = res.count ? res.count : 0;
      })
    }

    const audioExample = () => {
      let audio = new Audio('./assets/sound.mp3');
      audio.volume = 1;
      audio.currentTime = 0.04;
      audio.play()
      audio.onended = () => {
        audio.remove();
      }
    }

    const addMerit = () => {
      woodenFishEl.style.transform = 'scale(1.1)'
      let meritEl = document.createElement('div');
      meritEl.innerText = '+ 1功德'
      meritEl.classList.add('merit')
      setTimeout(()=>{
        meritEl.remove()
      }, 300)
      viewEl.appendChild(meritEl)
      audioExample()
      data.count++;
      countEl.innerText = data.count
      if(window.sendSaveData){
        window.sendSaveData(data);
      }
    }

 

    // 按下与松开
    woodenFishEl.onmousedown = (e)=>{
      if(e.button === 0){
        if(!countFlag){
          countFlag = true
          addMerit()
        }
      }
    }
    woodenFishEl.onmouseup = ()=>{
      countFlag = false;
      woodenFishEl.style.transform = 'scale(1)';
    }


    // 按下空格或回车
    document.onkeydown = (e)=>{
      if(e.keyCode === 32 || e.keyCode === 13){
       
        if(!countFlag){
          countFlag = true
          addMerit()
        }
      }
    }


    // 松开空格或回车
    document.onkeyup = (e)=>{
      if(e.keyCode === 32 || e.keyCode === 13){
        countFlag = false;
        woodenFishEl.style.transform = 'scale(1)';
      }
    }

    window.getData = ()=>data


  </script>
</html>
